<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElMessage, inputEmits } from 'element-plus'
import fixTime from '@/utils/fixTime'
import { formatTime } from '@/utils/common'
import {
  getSearchAralmApi
} from '@/api/alarm'
// props

// 定义变量
// 控制弹框显隐
const AlarmListVisible = ref(false)
// 类型Options
const typeOptions = ref([
  {
    value: 'Infrared',
    label: '红外'
  },
  {
    value: 'CO',
    label: '一氧化碳'
  },
  {
    value: 'CH4',
    label: '甲烷'
  },
  {
    value: 'SMOKE',
    label: '烟感'
  },
  {
    value: 'FOG',
    label: '粉尘'
  },
  {
    value: 'O2',
    label: '氧气'
  },
  {
    value: '存煤',
    label: '存煤'
  }
])
// 煤棚
const yardOptions = [
  {
    label: 'A煤棚',
    value: '1'
  },
  {
    label: 'B煤棚',
    value: '2'
  }
]
// 选择的类型
const alarmType = ref('')
// 选择的煤棚
const yardCode = ref('')
// 选择的时间
const time = ref([ '', '' ])
// 输入的位置
const key = ref('')
// 展示的数据源
const alarmList = ref([])
// 当前页码
const currentPage = ref(1)
const pageSize = ref(10)
// 数据总数
const pageTotal = ref(0)

// 监听器
watch(currentPage, async (nv, ov) => {
  currentPage.value = nv
  getAlarmData()
})

// 定义方法
// 展示弹框
const showAlarmList = async () => {
  getAlarmData()
  AlarmListVisible.value = true
}

// 查询设备信息
const queryDevice = async () => {
  getAlarmData()
}

// 网络请求获取数据
const getAlarmData = async () => {
  let data = {
    type: alarmType.value,
    YardCode: yardCode.value,
    SearchTimeBegin: time.value[0] ? formatTime(time.value[0]) : '',
    SearchTimeEnd: time.value[1] ? formatTime(time.value[1]) : '',
    maxResultCount: pageSize.value,
    skipCount: (currentPage.value - 1) * 10
  }
  let res = await getSearchAralmApi(data)
  if (!res.totalCount && res.totalCount !== 0) {
    ElMessage({
      // message: `${res.message}`,
      message: '网络请求中断获取数据错误！',
      type: 'warning'
    })
    return
  }
  alarmList.value = fixDeviceType(res.items)
  pageTotal.value = res.totalCount
}

// 清洗数据
const fixDeviceType = (arr: any) => {
  arr.forEach((item: any, index: number) => {
    switch (item.level) {
    case 'H1':
      arr[index].level =  '一级报警'
      break
    case 'H2':
      arr[index].level = '二级报警'
      break
    case '1L':
      arr[index].level = '一级报警'
      break
    case '2L':
      arr[index].level = '二级报警'
      break
    }
    item.creationTime = formatTime(item.creationTime)
    switch (item.type) {
    case 'Infrared':
      arr[index].type = '红外报警'
      break
    case 'CO':
      arr[index].type = '一氧化碳'
      break
    case 'CH4':
      arr[index].type = '甲烷'
      break
    case 'SMOKE':
      arr[index].type = '烟感'
      break
    case 'FOG':
      arr[index].type = '粉尘'
      break
    case 'OpenFireCoal':
      arr[index].type = '明火煤'
      break
    case '207':
      arr[index].type = '温感电缆'
      break
    case 'O2':
      arr[index].type = '氧气'
      break
    
    }
  })
  return arr
}

// 清除查询条件
const clearQueryData = () => {
  alarmType.value = ''
  time.value[0] = ''
  time.value[1] = ''
  key.value = ''
  currentPage.value = 1
}

const handlePlanSizeChange = (val: number) => {
  
  pageSize.value = val
  getAlarmData()
}

// 向外暴露的函数
defineExpose({
  showAlarmList
})
</script>

<template>
  <el-dialog
    v-model="AlarmListVisible"
    class="alarm-list-dialog"
    @close="clearQueryData"
  >
    <template #header>
      <div class="alarm-header-box">
        <div class="title">
          报警列表
        </div>
      </div>
    </template>
    <div class="filter-box">
      <el-select
        v-model="alarmType"
        class="infrar-state"
        placeholder="请选择类型"
      >
        <template #prefix>
          <div>报警类型</div>
        </template>
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="yardCode"
        class="infrar-yard"
        placeholder="请选择煤棚"
      >
        <template #prefix>
          <div>煤棚</div>
        </template>
        <el-option
          v-for="item in yardOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <!-- <el-input
        v-model="key"
        class="infrar-posi"
        placeholder="请输入位置"
      >
        <template #prefix>
          <div>位置</div>
        </template>
      </el-input> -->
      <el-date-picker
        v-model="time"
        class="infrar-time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
      <div class="btn-box">
        <div
          class="search-btn"
          @click="queryDevice"
        >
          查询
        </div>
        <div
          class="clear-btn"
          @click="clearQueryData"
        >
          重置
        </div>
      </div>
    </div>
    <div class="alarm-list-table">
      <el-table
        class="device-table"
        :data="alarmList"
        :header-cell-style="{ background: '#f7f8faFF', color: '#6B7785FF' }"
        style="width: 100%"
        height="449"
      >
        <el-table-column
          align="center"
          prop="yardName"
          label="煤棚"
        />
        <el-table-column
          align="center"
          prop="creationTime"
          label="时间"
        />
        <el-table-column
          align="center"
          prop="type"
          label="类型"
        />
        <el-table-column
          align="center"
          prop="content"
          label="详情"
        />
      </el-table>
    </div>
    <div class="pagination-box">
      <!-- <el-pagination
        v-model:current-page="currentPage"
        class="alarm-page"
        :page-size="10"
        :pager-count="6"
        layout="prev, pager, next,"
        :total="pageTotal"
      /> -->
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
        @size-change="handlePlanSizeChange"
      />
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.filter-box {
  display: flex;
  height: 32px;
  margin-left: 10px;

  /* border: 1px solid red; */
  .btn-box {
    display: flex;
    align-items: center;
    margin-left: 30px;
    >div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 30px;
      margin-top: 6px;
      font-weight: 600;
      font-size: 14px;
      font-family: PingFang, sans-serif;
      line-height: 20px;
      text-align: center;
      background-clip: text;
      border: 1px solid #1D41FF;
    }
    .search-btn {
      color: #fff;
      background: #1D41FF;
    }
    .search-btn:hover {
      cursor: pointer;
    }
    .clear-btn {
      width: 50px;
      margin-left: 15px;
    }
    .clear-btn:hover {
      color: #fff;
      background: #1D41FF;
      cursor: pointer;
    }
  }
  .icon-divider {
    width: 0 !important;
    height: 12px !important;
    margin-top: 10px !important;
    border: 1px solid #a9aeb8 !important;
  }
  .infrar-state,
  .infrar-yard,
  .infrar-posi,
  .infrar-time {
    width: 240px;
    height: 32px;
  }
  .infrar-yard,,
  .infrar-time {
    margin-left: 16px;
  }
  .device-page {
    margin-left: 680px;
  }
}
.alarm-list-table {
  width: 940px;
  height: 449px;
  margin-top: 16px;
  margin-left: 10px;
  border-right: 1px solid #e5e6eb;
  border-left: 1px solid #e5e6eb;

  /* border: 1px solid red; */
}
.pagination-box {
  display: flex;
  justify-content: end;
  height: 30px;
  margin-top: 16px;
  padding-left: 670px;

  /* border: 1px solid red; */
}
</style>
<style lang="scss">
.alarm-list-dialog {
  width: 1000px;
  height: 629px;
  .alarm-header-box {
    display: flex;
    margin-left: 10px;
    .title {
      width: 120px;
      height: 28px;
      color: #4e5969;
      font-weight: 600;
      font-size: 20px;
      font-family: PingFang, sans-serif;
      line-height: 23px;
      background-clip: text;
    }
    .position-name {
      width: 252px;
      height: 28px;
      margin-left: 24px;
      color: #2191ff;
      font-weight: 600;
      font-size: 20px;
      font-family: PingFang, sans-serif;
      line-height: 23px;
      background-clip: text;
    }
  }
  .el-dialog__body {
    padding-top: 0;
  }
}
.infrar-state {
  .el-select__popper {
    border: 1px solid red;
  }
}
</style>